<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>库存明细</span>
          </div>
          
        </div>
        <div class="mainor_form batch-wrap form-item-mg mg-t-14">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
          >
            <el-form-item label="记录时间：" prop="newime">
              <el-date-picker
                v-model="form.newtime"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="datePick"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="记录类型：" prop="type">
              <el-select
                v-model.trim="form.type"
                placeholder="记录类型"
                class="wid220"
              >
                <el-option label="所有" :value="parseInt(0)"></el-option>
                <el-option
                  v-for="(fromList, index) in recordType"
                  :key="index"
                  :label="fromList"
                  :value="parseInt(index + 1)"
                ></el-option>
              </el-select>
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="false">
              <el-button
                @click="exportOrderiInfo"
                >导出</el-button
              >
            </MainFormBtn>
          </el-form>
        </div>
        <!-- 合计 -->
        <div class="total mg-b-10">
          <div class="item">
            <span>入库总金额：</span>
            <span>{{ money.in ? $toFixed(parseFloat(money.in)) : 0 }}</span>
          </div>
          <div class="item">
            <span>出库总金额：</span>
            <span>{{ money.out ? $toFixed(parseFloat(money.out)) : 0 }}</span>
          </div>
        </div>
        <!-- 表单数据 -->
        <div class="main_table">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            :header-cell-class-name="this.$verticaline"
          >
            <el-table-column label="序号" fixed prop="userId" width="80">
              <template slot-scope="scope">{{
                (current.page - 1) * current.per_page + scope.$index + 1
              }}</template>
            </el-table-column>
            <el-table-column label="商品名称" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ scope.row.goods.name }}【{{
                  scope.row.goods_spu.spu_name.title
                }}】
              </template>
            </el-table-column>
            <el-table-column
              label="单位"
              prop="goods_spu.spu_unit.title"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="关联单据"
              prop="related_order_sn"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="单据类型"
              prop="document_type_name"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="记录类型"
              prop="type_name"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="数量" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{
                  scope.row.type == 1
                    ? scope.row.storage_num
                    : scope.row.stock_out_num
                }}
              </template>
            </el-table-column>
            <el-table-column label="库存价" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{
                  scope.row.newStockPrice
                    ? $toFixed(parseFloat(scope.row.newStockPrice))
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column label="金额" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{
                  scope.row.type == 1
                    ? scope.row.storage_money
                    : scope.row.stock_out_money
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="结余库存"
              prop="closing_stock"
              :show-overflow-tooltip="true"
            ></el-table-column
            >’
            <el-table-column label="记录时间" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ parseTime(scope.row.created_at) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <MainPagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  stockLog_list,
  stockLog_index,
  export_stocklog_detail,
} from "@/api/warehouse/warehouseLog";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, exportMethod } from "@/utils/index";
import { recursion, category } from "@/utils/index";
export default {
  components: {},
  data() {
    return {
      // 时间
      parseTime,
      exportMethod,
      // 加载中
      list: null,
      listLoading: true,
      // 分页样式
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 记录类型
      recordType: [],
      // 列表数据
      list: [],
      listLoading: false,
      document_type_list: [], //单据类型
      // 入库  出库总金额
      money: {
        out: 0,
        in: 0,
      },
      // 记录时价范围选择
      time: "",
      // 搜索
      form: {
        pid: "",
        category_id: [],
        goods_spu_id: this.$route.query.id,
        start_time: this.$route.query.start_time,
        end_time: this.$route.query.end_time,
        type: 0,
        newtime: [this.$route.query.start_time, this.$route.query.end_time],
      },
      time: [],
      // 更多
      moredata: false,
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
    };
  },

  created() {
    this.stockLogList();
  },
  methods: {
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 搜索
    getArticleList() {
      this.money.in = 0;
      this.money.out = 0;
      this.stockLogList();
    },
    reset() {
      this.form.start_time = parseTime(new Date(), "{y}-{m}-{d}");
      this.form.end_time = parseTime(new Date(), "{y}-{m}-{d}");
      this.$refs["userListFrom"].resetFields();
      this.form.newtime = [this.form.start_time, this.form.end_time];
      this.stockLogList();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.stockLogList();
    },
    changePage(page) {
      this.current.page = page;
      this.stockLogList();
    },
    // 日期选择
    datePick(time) {
      this.form.start_time = this.form.newtime[0];
      this.form.end_time = this.form.newtime[1];
    },
    // 请求明细信息
    stockLogList() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.current,
        this.list_form()
      );
      stockLog_list(data).then((res) => {
        if (res.errcode == 0) {
          let list = res.data.list.data;
          let document_type_list = res.data.document_type_list;
          let typeList = res.data.typeList;
          list.forEach((item) => {
            //
            if (item.type == 1) {
              this.money.in = this.money.in + parseFloat(item.storage_money);
              if (item.storage_num != 0) {
                item.newStockPrice = (
                  item.storage_money / item.storage_num
                ).toFixed(2);
              } else {
                item.newStockPrice = 0;
              }
            } else if (item.type == 2) {
              this.money.out =
                this.money.out + parseFloat(item.stock_out_money);
              if (item.stock_out_num != 0) {
                item.newStockPrice = item.stock_out_money / item.stock_out_num;
              } else {
                item.newStockPrice = 0;
              }
            }
            // 转换数组
            for (let i in document_type_list) {
              if (item.document_type == i) {
                item.document_type_name = document_type_list[i];
              }
            }
            for (let a in typeList) {
              if (item.type == a) {
                item.type_name = typeList[a];
              }
            }
          });
          this.recordType = [];
          for (let a in typeList) {
            this.recordType.push(typeList[a]);
          }
          this.totalCount = res.data.list.total;
          this.list = list;
        }
        this.listLoading = false;
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      return form;
    },
    // 导出明细
    exportOrderiInfo() {
      let form = {};
      form.send_time = this.form.start_time;
      form.end_time = this.form.end_time;
      form.goods_spu_id = this.form.goods_spu_id;
      form.type = this.form.type;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name), form) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      if (this.list.length == 0) {
        this.$message.warning("当前无可导出的数据记录");
        return;
      }
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      export_stocklog_detail(data)
        .then((res) => {
          this.exportMethod(res, "库存记录明细表", notify);
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.total {
  display: flex;
  flex-direction: row;
  .item {
    margin-right: 25px;
    span {
      font-size: 14px;
      &:last-child {
        font-size: 14px;
        color: #e47c02;
        font-weight: 700;
      }
    }
  }
}
</style>
